<template>
	<div class="msg_div">
		<div class="left2_div">
			<div v-for="chat in chatList" class="msg_item" @click="inchat(chat.fid)">
				<div style="display: flex; align-items: center;">
					<el-image :src="$.getImg(chat.header)" class="header2_cls" fit="cover"></el-image>
					<div style="margin-left: 20px;">{{chat.nickname}}</div>
				</div>
				<div v-if="chat.status == 1" class="point_red"></div>
			</div>
		</div>
		<div class="right2_div">
			<!-- 默认的页面 -->
			<div v-if="ischat" style="width: 100%; height: 100%;">
				<el-empty style="height: 100%;" description="暂无消息"></el-empty>
			</div>
			<div v-else style="width: 100%; height: 100%;">
				<Chat ref="chatref" style="height: 100%;" :fid="fid"></Chat>
			</div>
		</div>
	</div>
</template>

<script>
	import Chat from "./Chat.vue"
	
	export default {
		components: {Chat},
		data() {
			return {
				header: require("@/assets/header.png"),
				//聊天列表
				chatList: [],
				//开始聊天
				ischat: true,
				//正在聊天的好友id
				fid: ""
			}
		},
		methods: {
			addChatItem(fid) {
				if(fid){
					//根据好友id，获取好友的基本信息
					var friend = this.$.getFriendInfo(fid);
					console.log("获取好友基本信息：", friend);
					
					//新增一个好友的聊天项
					var chatItem = {
						fid: fid,
						header: friend.header,
						nickname: friend.nickname,
						status: 0 //是否有未读的消息 0 - 没有 1 - 有
					}
					
					//删除掉同一个用户的聊天项
					for(var i = 0; i < this.chatList.length; i++){
						var ci = this.chatList[i];
						if(ci.fid == fid){
							//删除这个选项
							this.chatList.splice(i, 1);
							break;
						}
					}
					
					//加入
					this.chatList.unshift(chatItem);
					
					//缓存当前页面的消息列表
					window.localStorage.setItem(
						"chatlist-" + this.$.getUser().id,
						JSON.stringify(this.chatList)
					)
				}
			},
			//展示历史的聊天列表项
			showHistoryChatList(){
				var chatJson = window.localStorage.getItem("chatlist-" + this.$.getUser().id);
				if(chatJson){
					this.chatList = JSON.parse(chatJson);
				}
			},
			//进入聊天页面
			inchat(fid){
				this.updateChatItemStatus(fid);
				//打开聊天页面
				this.ischat = false;
				//设置正在聊天的好友id
				this.fid = fid;
				
				setTimeout(() => {
					//重新初始化聊天组件
					this.$refs.chatref.initChat();
				}, 50);
			},
			//更新聊天项的状态
			updateChatItemStatus(fid, status){
				//更新聊天项 - 已读
				for(var i = 0; i < this.chatList.length; i++){
					var ci = this.chatList[i];
					if(ci.fid == fid){
						//修改当前状态为已读
						ci.status = status;
						break;
					}
				}
				
				//缓存当前页面的消息列表
				window.localStorage.setItem(
					"chatlist-" + this.$.getUser().id,
					JSON.stringify(this.chatList)
				)
			}
		},
		mounted() {
			//展示历史的聊天列表项
			this.showHistoryChatList();
			
			//接收好友id
			var fid = this.$route.params.fid;
			if(fid) {
				//更新聊天项
				this.addChatItem(fid);
				//进入聊天页面
				this.inchat(fid);
				//更新聊天项状态
				this.updateChatItemStatus(fid, 0);
			}
			
			//监听时间
			this.$EventBus.$off("reciMsg");
			this.$EventBus.$on("reciMsg", (msgObj) => {
				//展示当前聊天项
				this.addChatItem(msgObj.from);
				
				//创建一个消息对象
				var msgInfo = {
					//发送者id
					uid: msgObj.from,
					//消息的发送时间
					sendTime: new Date().getTime(),
					//消息类型 1-文本 2-图片
					type: msgObj.type,
					//消息的内容
					content: msgObj.content
				}
				
				//缓存当去的消息
				this.$.saveMsgList(msgObj.from, msgInfo);
				
				//展示到聊天页面上
				var flag = false;
				if(this.$refs.chatref) {
					flag = this.$refs.chatref.addMsg(msgInfo);
				}
				
				//没在和这个好友的聊天页面
				if(!flag){
					//更新聊天项状态
					this.updateChatItemStatus(msgObj.from, 1);
				}
			});
		}
	}
</script>

<style>
	.msg_div {
		display: flex;
		width: 100%;
		height: 100%;
	}
	
	.left2_div {
		width: 300px;
		height: 100%;
		border-right: 1px solid black;
		overflow: auto;
	}
	
	.right2_div {
		flex-grow: 1;
		height: 100%;
	}
	
	.msg_item {
		width: 100%;
		height: 100px;
		border-bottom: 1px solid darkgray;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.header2_cls {
		width: 80px;
		height: 80px;
		border-radius: 40px;
	}
	
	.point_red {
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background-color: red;
	}
</style>